<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Uploadify单图上传</title>
<link href="__PUBLIC__/Static/uploadify/uploadify.css" rel="stylesheet">
<script src="__PUBLIC__/Static/jquery.min.js"></script>
<script src="__PUBLIC__/Static/uploadify/jquery.uploadify.min.js"></script>

<script>
	$(function(){
		$("#upload").uploadify({
			'width'         : 120,//按钮宽
			'height'        : 30,//按钮高
			'buttonText'	  : '选择文件',//按钮名称
			'swf'           : '__PUBLIC__/Static/uploadify/uploadify.swf',//flash地址
            //下面是后端相关
            "multi"         : false,//是否多图上传
			'auto'		    : true,//是否自动上传
            'fileObjName'   : 'Filedata',
			'uploader'      : '{:U("Uploadify/upload")}',//处理上传的控制器
            'fileTypeExts'	  : '*.jpg; *.png; *.gif;',
			'removeCompleted': true,//上传成功之后是否移除队列
            'removeTimeout' : 1,
			'onInit': function (){},		
            'onFallback'   : function() {
                alert('未检测到兼容版本的Flash.');
            },
            'onDialogClose': function(queueData){},
            'onUploadStart': function(){},
			'onUploadSuccess':  function(file, data, response) {
console.log(file);
console.log(data);// {"file":""}
console.log(response);//true 

				var result = $.parseJSON(data);
				//错误处理 巧妙的运用拦截手法，用拦截代替分支
				if(result.status == 0){ 
					alert(result.info);
					return false;
				}
				//上传成功
                    //设置隐藏域的值
                $('#uploadify-hidden').val(result.data.path);
				var id = Math.random().toString();
				id = id.replace('.','_'); //生成唯一标示 用于高级功能的识别例如 移除等
				var html = '<li id="'+id+'" style="background: none repeat scroll 0 0 #F0F0F0;border: 1px solid #E0E0E0; padding: 11px; width: 160px; height:170px; overflow:hidden;" >';
					html+= '<img height="160" width="160" src="__ROOT__'+result.data.path+'" />';
					html+=  '</li>';
				$('#uploadify-imagelist').html(html);
			}
			
		});
	})
</script>
</head>

<body>
        <div>
                <div>
                    <input type="file"  id="upload">
                    <input type="hidden" name="file" id="uploadify-hidden" value="">
                </div>
                <div>
                    <ul id="uploadify-imagelist"></ul>
                </div>
        </div>

</body>
</html>
